<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>

<!--
     表单标签使用      实现用户和系统的交互
     form  表单标签
     表单元素  实现表单的组建
-->
<h4>欢迎注册</h4>
<!--
  action:  表单数据发送的服务器地址
  key = value
  readonly  只读
  required  必填项
  placeholder  文本框的提示信息

  发送http请求   请求的格式有几种?
  get    获取数据     默认
  post    添加数据
  put     修改数据
  delete  删除数据
  option  预检请求  多见于前后端分离场景下

  method  设置请求格式
-->
<form action="http://www.baidu.com" method="post">
    <!--    普通文本输入-->
    <p>用户名: <input type="text" value="admin" name="username" placeholder="请填写用户名"></p>
    <!--    密码框-->
    <p>密码: <input type="password" value="123456" name="password"></p>
<!--    单选  name-->
    <p>
        性别: <input type="radio" name="sex" value="女"> 女
         <input type="radio" name="sex"  value="男" checked>男
         <input type="radio" value="不详" name="sex">不详
    </p>
<!--    复选  -->
    <p>
        兴趣: <input type="checkbox" name="hobby"> 音乐
        <input type="checkbox" checked name="hobby"> 蓝球
        <input type="checkbox" checked name="hobby"> 足球
        <input type="checkbox" name="hobby"> 敲代码
    </p>
<!--    下拉选-->
    <p>
        地址:
        省:<select name="province">
            <option>请选择省份</option>
            <option selected>安徽省</option>
            <option>江苏省</option>
            <option>福建省</option>
          </select>
        市:<select name="city">
                <option>请选择市</option>
                <option>合肥市</option>
                <option >蚌埠市</option>
                <option selected>淮南市</option>
         </select>
    </p>
<!--    文本域-->
    <p>
        详细地址:
        <textarea cols="30" rows="5" name="info"></textarea>

    </p>
    <p>
        <input type="submit" value="注册">
<!--        重置按钮  可以将表单数据重置到页面加载时的效果-->
        <input type="reset" value="重置">
    </p>

</form>
</body>
</html>